<template>
  <el-container>
    <el-header class="header">
      <el-menu
        :default-active="active"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b">
        <el-menu-item index="home">
          <i class="el-icon-menu"></i>
          <span slot="title">美图点评</span>
        </el-menu-item>
        <el-menu-item index="about">
          <i class="el-icon-document"></i>
          <span slot="title">展示</span>
        </el-menu-item>
        <!-- <el-menu-item index="about">
          <i class="el-icon-menu"></i>
          <span slot="title">消息</span>
        </el-menu-item> -->
      </el-menu>
    </el-header>
    <el-main>
      <el-row  v-for="item in list" :key="item.id" style="margin-bottom: 10px" :gutter="10">
        <el-col :span="3">
          <el-card :body-style="{ padding: '0px'}">
            <!-- <img :src="item.image" class="image" style="width: 100%"> -->
            <el-image :src="item.image" class="image">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <el-progress text-inside :stroke-width="20" :percentage="item.importance" :status="item.status"></el-progress>
            <el-alert
              :title="item.title"
              type="info"
              :closable="false">
            </el-alert>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-badge :value="item.importance" :max="50" :type="item.type">
            <el-card
              style="height: 166px"
              :body-style=
              "{
                'line-height': '29px',
                'text-indent': '35px',
                'letter-spacing': '5px',
                '-webkit-text-stroke-width': 'medium'
              }">
              {{item.content}}
            </el-card>
          </el-badge>
        </el-col>
      </el-row>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
    </el-main>
  </el-container>
</template>

<script>

import { fetchList } from '@/api/article'


export default {
  name: 'home',
  components: {},
  data() {
    return {
      active: 'home',
      queryParams: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id',
      },
      list: [],
      total: 0,
    };
  },
  mounted() {
    this.query()
  },
  methods: {
    query() {
      fetchList(this.queryParams).then(({ data }) => {
        this.list = data.list
        this.total = data.total
        console.log('total', data.total)
      })
    },
    handleSizeChange(val) {
      this.queryParams.limit = val
      this.query()
    },
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.query()
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
};
</script>
<style lang="scss" scoped>
$--color-primary: #FFC340;
.header {
  padding: 0;
  background-color: $--color-primary;
}
.image {
  width: 220px;
  height: 110px;
}
.image-slot {
  height: 110px;
  line-height: 110px;
}
</style>
